<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="theme-color" content="#4374A5">
  <title>PWA Manifest Demo</title>
  <link rel="manifest" href="./manifest.json">
</head>
<body>
  <div>Hello PWA Manifest Demo<div>
  <button hidden id="installBtn">安装应用</button>
  <script>
    window.addEventListener('load', function() {
      if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('./sw.js');
      }
      let appPromptEvent = null;
      const installBtn = document.getElementById('installBtn');
      window.addEventListener('beforeinstallprompt', function(event) {
        console.log('触发事件：beforeinstallprompt');
        event.preventDefault();
        appPromptEvent = event;
        installBtn.hidden = false;
        return false;
      });
      installBtn.addEventListener('click', function() {
        if (appPromptEvent !== null) {
          appPromptEvent.prompt();
          appPromptEvent.userChoice.then(function(result) {
            if (result.outcome === 'accepted') {
              console.log('同意安装应用');
            } else {
              console.log('不同意安装应用');
            }
            appPromptEvent = null;
          });
        }
      });
      window.addEventListener('appinstalled', function() {
        console.log('应用已安装');
        installBtn.hidden = true;
      });
    });
  </script>
</body>
</html>

